////
/// Components
/// Block variants
////

@import 'utils/shared/layout';
@import 'components/Patterns/props';

///
/// BlockLayout
.BlockLayout--typeFlex,
.BlockLayout--typeFloat {
  margin-top: -(get-border(thin));
  margin-left: -(get-border(thin));

  > .BlockWrapper {
    margin-top: get-border(thin);
    margin-left: get-border(thin);
  }

  > .Block {
    padding-top: get-border(thin);
    padding-left: get-border(thin);
  }

  @media screen and (min-width: get-breakpoint(tablet)) {
    margin-top: -(get-border());
    margin-left: -(get-border());

    > .BlockWrapper {
      margin-top: get-border();
      margin-left: get-border();
    }

    > .Block {
      padding-top: get-border();
      padding-left: get-border();
    }
  }
}

.BlockLayout--typeFlex {
  display: flex;
  flex-wrap: wrap;

  .Block {
    flex: 1 1 100%;
  }
}

.BlockLayout--typeFloat {
  @include clearfix;

  .Block {
    float: left;
    width: 100%;
  }
}

.BlockLayout--typeGrid {
  display: grid;
  gap: get-border(thin);

  @media screen and (min-width: get-breakpoint(tablet)) {
    gap: get-border();
  }
}

.BlockLayout--typePositioned {
  position: relative;
}

///
/// Block types
.Block--typeShell {
  .BlockContent {
    color: get-color(coal, dark);
    background-color: white;
    border-color: currentColor;
  }
}

.Block--typeHollow {
  .BlockContent {
    color: get-color(ash, dark);
    background-color: white;
    border-color: currentColor;
  }
}

.Block--typeStripes {
  .BlockContent {
    @include stripes-bg;
    color: get-color(coal, dark);
    border-color: currentColor;
    transition: color get-duration(fast) get-easing();
  }
}

///
/// Draggable Blocks
.Block--isDraggable {
  cursor: get-cursor(drag);

  .BlockContent {
    color: get-color(coal, dark);
    background-color: white;
    border-color: currentColor;
    transition: color get-duration(fast) get-easing(),
      background-color get-duration(fast) get-easing(), transform get-duration() get-easing(bungie);
  }

  // interaction
  &:focus .BlockContent,
  &:hover .BlockContent {
    color: get-color(brand, blue);
  }

  &.draggable-source--is-dragging .BlockContent {
    color: get-color(brand, blue);

    .Pattern--typeHalftone {
      @include pattern-halftone-animated;
    }
  }

  &.draggable-source--placed .BlockContent {
    .Pattern--typePlaced {
      @include pattern-placed-animated;
    }
  }

  &.draggable-mirror {
    z-index: get-z-index(overlay);
    transition: width get-duration() get-easing(bungie), height get-duration() get-easing(bungie);

    .BlockContent {
      height: 100%;
      color: white;
      background-color: get-color(brand, blue);
      border-color: get-color(brand, blue);
      transform: scale(1.025);
    }
  }
}

///
/// Droppable
.BlockWrapper {
  position: relative;

  &.draggable-dropzone--occupied {
    .Block--typeHollow,
    .Block--typeStripes {
      @include position-cover;
    }
  }
}

///
/// Collidable
// stylelint-disable-next-line no-duplicate-selectors
.Block--typeStripes {
  // should be a native Draggable class name
  &.isColliding {
    .BlockContent {
      color: get-color(brand, red);
    }
  }
}
